<template>  
  <div id="app">
    <personal-header :name="name" :portrait="headPortraitFileId"></personal-header>
    <template v-for="item in order">
      <list :data="item"  :account="account" v-on:unbindOrder="clearOrder" :canClose="true"></list>  
    </template>
  </div>
</template>

<script>
      
  import List from './components/list.vue'
  import PersonalHeader from './components/person_header.vue'  
  import request from 'superagent'
  import c from './configs'

  export default {    

    components: { PersonalHeader, List },

    name: 'app',
    data: function() {
      return {                
        secretId: 100039,
        name: 'unknown',
        account: 'pc9527',
        headProtraitFileId: 'xxxxxxxx',
        order: []
      }
    },
    methods: {
      clearOrder: function (orderId) {
        this.order = this.order.filter(function(i) {
          return i.orderId != orderId
        })      
      }
    },
    mounted: function() {
      var self = this      

      request
        .get(c.ctx + '/wechat/order/wechatList')
        .end(function(err, res) {
          if (err || !res.ok) {
            // alert('server breaks')
          } else {
            self.name = res.body.data.name
            self.account = res.body.data.account
            self.headPortraitFileId = res.body.data.headPortraitFileId
            self.order = res.body.data.order
          }
        })
    }
  }
</script>

<style lang="less">  
  @gradientStart: #acbefe;
  @gradientEnd: #6fcdff;
  @import "./styles/reset.less";
  @import "./styles/basic.less";
  #app {    
    background-color: #f2f2f2;    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    .orderslist {
      margin: 0 auto;
      padding: 0 5px;
      .list {
        box-shadow: 0px 0px 4px #ddd;
      }
    }
  }
</style>

